@import '../../style/themes/index';
@import './mixin.less';
@spin-prefix-cls: ~'@{kd-prefix}-spin';

.@{spin-prefix-cls} {
  // 页面加载动画
  &-page {
    // position: absolute;
    // top: 0;
    // left: 0;
    // bottom: 0;
    // right: 0;

    .@{spin-prefix-cls}-dot-spin {
      width: @spin-page-dot-spin-sizing;
      height: @spin-page-dot-spin-sizing;
      padding: @spin-page-dot-spin-spacing-padding;
      // background: @logo-color-1;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
    }

    .@{spin-prefix-cls}-dot-item {
      .dot(@spin-page-dot-item-sizing, @spin-dot-color-first);

      &:nth-child(2n+1) {
        animation: pageLoading 1s .3s ease-in-out infinite
      }

      &:nth-child(2n+2) {
        background-color: @spin-dot-color-second;
        animation: pageLoading 1s .2s ease-in-out infinite
      }

      &:nth-child(2n+3) {
        background-color: @spin-dot-color-third;
        animation: pageLoading 1s .1s ease-in-out infinite
      }

      &:nth-child(2n+4) {
        background-color: @spin-dot-color-fourth;
        animation: pageLoading 1s ease-in-out infinite
      }

      @keyframes pageLoading {
        50% {
          transform: scale(1.25);
        }
        100% {
          transform: scale(1);
        }
      }
    }
  }

  // 容器加载动画
  &-container {
    .@{spin-prefix-cls}-dot-spin {
      display: flex;
      height: 15px;
      width: 35px;
      justify-content: space-between;
      align-items: flex-end;

      .@{spin-prefix-cls}-dot-item {
        .dot(@spin-container-size, @spin-dot-color-first);

        &:nth-child(2n+1) {
          animation: containerLoading 1s .6s ease-in-out infinite
        }

        &:nth-child(2n+2) {
          background-color: @spin-dot-color-second;
          animation: containerLoading 1s .45s ease-in-out infinite
        }

        &:nth-child(2n+3) {
          background-color: @spin-dot-color-third;
          animation: containerLoading 1s .3s ease-in-out infinite
        }

        &:nth-child(2n+4) {
          background-color: @spin-dot-color-fourth;
          animation: containerLoading 1s .15s ease-in-out infinite
        }

        @keyframes containerLoading {
          50% {
            transform: translateY(-10px);
          }
          100% {
            transform: translateY(0);
          }
        }
      }
    }
  }

  // 组件加载动画
  &-component {
    .@{spin-prefix-cls}-dot-spin {
      width: @spin-component-spin-size;
      height: @spin-component-spin-size;
      border: @spin-component-spin-border solid @spin-component-dot-color-border;
      border-radius: 50%;
      position: relative;
      box-sizing: border-box;

      .@{spin-prefix-cls}-dot-item {
        width: @spin-component-spin-size;
        height: @spin-component-spin-size;
        box-sizing: border-box;
        border: @spin-component-spin-border solid transparent;
        // border-top-color: #5582f3;
        border-right-color: @spin-component-dot-item-color-border;
        border-radius: 50%;
        position: absolute;
        top: calc(-1 * @spin-component-spin-border);
        left: calc(-1 * @spin-component-spin-border);
        transform: rotate(-45deg);
        animation: componentRotate 1s linear infinite;

        @keyframes componentRotate {
          0% {
            transform: rotate(-45deg);
          }
          100% {
            transform: rotate(315deg);
          }
        }
      }
    }
  }

  // 内容内嵌
  &-children-wrapper {
    position: relative;
  }

  &-has-children {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  &-children-container {
    opacity: .5;
    user-select: none;
    pointer-events: none;
  }

  // 带提示文字时居中显示
  &-indicator-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.@{spin-prefix-cls}-rtl {
  direction: rtl;
  &.@{spin-prefix-cls}-component {
    .@{spin-prefix-cls}-dot-spin {
      .@{spin-prefix-cls}-dot-item {
        right: calc(-1 * @spin-component-spin-border);
        left: calc(-1 * @spin-component-spin-border);
        animation: rtlComponentRotate 1s linear infinite;

        @keyframes rtlComponentRotate {
          0% {
            transform: rotate(315deg);
          }
          100% {
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
}